<template>
  <view>
    <scroll-view
      class="list"
      scroll-y="true"
      refresher-enabled="true"
      :refresher-triggered="triggered"
      @refresherrefresh="onRefresh"
      @scrolltolower="onScrollTolower"
    >
      <view class="item" v-for="item in list" :key="item.id">
        <view class="left">
          <view class="title">{{ item.name }}</view>
        </view>
        <view class="right">
          <u-button
            text="编辑"
            type="primary"
            size="small"
            :customStyle="btnStyle"
            @click="onEdit(item.id)"
          ></u-button>
          <u-button
            text="删除"
            type="error"
            size="small"
            @click="onDelete(item.id)"
          ></u-button>
        </view>
      </view>
    </scroll-view>


    <!-- 编辑弹出表单 -->
    <u-popup
      :show="show"
      @close="close"
      @open="open"
      closeable
      :overlay="overlay"
    >
      <!-- 编辑 -->
      <u--form
        labelPosition="left"
        :model="source"
        :rules="rules"
        ref="edit"
        class="form"
      >
        <u-form-item label="客户来源" prop="name" class="item">
          <u--input v-model="source.name"></u--input>
        </u-form-item>
      </u--form>
      <u-button
        type="warning"
        icon="pushpin-fill"
        @click="onEdSubmit"
        :customStyle="btnStyle"
        >提交</u-button
      >
    </u-popup>

    <!-- 底部添加按钮 -->
    <u-button
      type="primary"
      text="添加"
      :customStyle="AddBtnStyle"
      @click="onAdd"
    ></u-button>
    <u-popup
      :show="add"
      @close="close"
      @open="open"
      closeable
      :overlay="overlay"
    >
      <u--form
        labelPosition="left"
        :model="adddata"
        :rules="rules"
        ref="uForm"
        class="form"
      >
        <u-form-item label="客户来源" prop="name" class="item">
          <u--input v-model="adddata.name"></u--input>
        </u-form-item>
      </u--form>
      <u-button
        type="primary"
        icon="pushpin-fill"
        @click="onAddSource"
        :customStyle="btnStyle"
        >添加</u-button
      >
    </u-popup>
    <u-toast ref="uToast"></u-toast>
    <!-- 模态框 -->
    <u-modal
      :show="delU"
      :title="title"
      :content="content"
      @confirm="onConfirm"
      showCancelButton
      @cancel="delU = !delU"
    />
  </view>
</template>
<script>
export default {
  data() {
    return {
      btnStyle: {
        marginRight: "10px",
      },
      AddBtnStyle: {
        position: "fixed",
        bottom: 0,
      },
      list: [],
      page: 1,
      limit: 10,
      listCount: 0,
      LoginAdmin: {},
      // 下拉刷新状态
      triggered: false,
      // 上拉加载状态
      finished: false,
      sourceid: 0,
      source: {
        name: "",
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入客户来源",
            trigger: ["blur", "change"],
          },
        ],
      },
      adddata: {
        name: "",
      },
      show: false,
      add: false,
      overlay: false,
      delU: false,
      title: "删除客户来源",
      content: "是否删除客户来源",
    };
  },
  methods: {
    onScrollTolower() {
      if (this.finished) {
        return;
      }

      this.page = this.page + 1;

      this.getSourceData();
    },

    async getSourceData() {
      let data = {
        adminid: this.LoginAdmin.id,
        page: this.page,
        limit: this.limit,
      };

      let result = await this.$u.api.manage.SourceIndex(data);

      this.triggered = false;

      if (result && result.code === 1) {
        this.listCount = result.data.count;
        this.list = this.list.concat(result.data.list);
      } else {
        this.finished = true;
        this.$refs.uToast.show({
          type: "error",
          message: result.msg,
        });
        return;
      }
    },
    onRefresh() {
      // 开启下拉刷新
      this.triggered = true;
      // 加载状态为false
      this.finished = false;
      this.page = 1;
      this.list = [];

      this.getSourceData();
    },
    // 编辑
    onEdit(id) {
      this.list.forEach((item) => {
        if (item.id === id) {
          this.source = item;
        }
      });
      this.show = true;
    },
    // 编辑方法
    async onEdSubmit() {
      let data = {
        id: this.source.id,
        name: this.source.name,
      };
      let result = await this.$u.api.manage.SourceEdit(data);
      if (result && result.code === 1) {
        this.$refs.uToast.show({
          type: "success",
          message: result.msg,
        });
        this.show = false;
        setTimeout(() => {
          this.$router.go(0);
        }, 1500);
      } else {
        this.$refs.uToast.show({
          type: "error",
          message: result.msg,
        });
        this.show = false;
        setTimeout(() => {
          this.$router.go(0);
        }, 1500);
      }
    },
    // 添加
    onAdd() {
      this.add = true;
    },
    // 添加方法
    async onAddSource() {
      let data = {
        name: this.adddata.name,
      };
      let result = await this.$u.api.manage.SourceAdd(data);
      if (result && result.code === 1) {
        this.$refs.uToast.show({
          type: "success",
          message: result.msg,
        });
        this.add = false;
        setTimeout(() => {
          this.$router.go(0);
        }, 1500);
      } else {
        this.$refs.uToast.show({
          type: "error",
          message: result.msg,
        });
        this.add = false;
      }
    },
    // 删除
    onDelete(id) {
      // 确认框
      this.sourceid = id;
      this.delU = true;
    },
    // 删除方法
    async onConfirm() {
      let data = {
        id: this.sourceid,
      };
      let result = await this.$u.api.manage.SourceDelete(data);
      if (result && result.code === 1) {
        this.$refs.uToast.show({
          type: "success",
          message: result.msg,
        });
        this.delU = false;

        setTimeout(() => {
          this.$router.go(0);
        }, 1500);
      } else {
        this.$refs.uToast.show({
          type: "error",
          message: result.msg,
        });
        this.delU = false;
      }
    },

    open() {

    },
    close() {
      this.add = false;
    },
  },

  onLoad() {
    this.LoginAdmin = uni.getStorageSync("admin") ?? {};

    this.getSourceData();
  },
};
</script>

<style>
.list {
  /* #ifdef H5 || APP-PULS */
  height: 86vh;
  /* #endif */
  
  /* #ifdef MP-WEIXIN */
  height: 94vh;
  /* #endif */
  overflow: hidden;
}

.item {
  display: flex;
  justify-content: space-between;
  padding: 15px 10px;
  border-bottom: 1px solid #ccc;
}

.item .right {
  display: flex;
}
</style>
